<template>
  <div class="main">
    <section>
      <search-form :listQuery="listQuery" :queryConfig="queryConfig" :labelWidth="100" :search="search" />
      <el-table v-loading="listLoading" :data="list" :default-sort="{prop: 'date', order: 'descending'}" element-loading-text="给我一点时间" border fit
        highlight-current-row>
        <el-table-column align="center" prop="goodsId" label="商品id"></el-table-column>
        <el-table-column align="center" prop="serialNo" label="商品款号"></el-table-column>
        <el-table-column align="center" prop="erpGoodsName" label="ERP商品名称"></el-table-column>
        <el-table-column align="center" prop="backCatName" label="后台分类"></el-table-column>
        <el-table-column align="center" prop="isBind" label="状态">
          <template slot-scope="scope">
            <span>{{scope.row.isBind?'已引入' : '未引入'}}</span>
          </template>
        </el-table-column>
        <el-table-column align="left" label="操作">
          <template slot-scope="scope">
            <el-button type="primary" plain @click="$router.push({path:'/goodsMiddleStage/e3GoodsDetail', query:{...scope.row}})">查看</el-button>
            <el-button v-if="!scope.row.isBind" @click="bindComfir(scope.row)" type="success" plain>引入</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="listQuery.pageIndex"
        :page-sizes="[10, 20, 50, 100, 200]" :page-size="listQuery.pageSize" background layout="total, sizes, prev, pager, next, jumper"
        :total="listTotal">
      </el-pagination>
    </section>
  </div>
</template>

<script>
/**
 * e3商品档案库
 */
import mixins from '../mixins'
import SearchForm from '@/components/searchForm'
import {
  getCateTree,
  getE3GoodsList,
  updateE3BindStatus
} from '@/api/goodMiddleStage'
export default {
  name: 'goodsMiddleStage-e3Goods',
  mixins: [mixins],
  components: {
    SearchForm
  },
  data() {
    return {
      listQuery: {
        backCatId: '',
        erpGoodsName: '',
        pageIndex: 0,
        pageSize: 20,
        queryType: 3,
        serialNo: '',
        isBind: ''
      },
      queryConfig: [
        {
          prop: 'erpGoodsName',
          type: 'input',
          label: 'ERP商品名'
        },
        {
          prop: 'serialNo',
          type: 'input',
          label: '商品款号'
        },
        {
          prop: 'backCatIds',
          type: 'cascader',
          label: '后台分类',
          showAll: false, // 级联选择 是否展示全部
          settings: { value: 'catId', label: 'name' },
          data: []
        },
        {
          prop: 'isBind',
          type: 'select',
          label: '引入状态',
          data: [
            {
              label: '全部',
              value: ''
            },
            {
              label: '未引入',
              value: 0
            },
            {
              label: '已引入',
              value: 1
            }
          ]
        }
      ]
    }
  },
  created() {
    this.init()
  },
  methods: {
    init() {
      this.getBackCateTree()
      this.getList()
    },
    async getList() {
      try {
        let isBind = ''
        if (this.listQuery.isBind === '') {
          isBind = ''
        } else {
          isBind = !!this.listQuery.isBind
        }
        const { data } = await getE3GoodsList({
          ...this.listQuery,
          isBind
        })
        this.list = data.data
        this.listTotal = data.total
        console.log(data)
      } catch (error) {
        console.log(error)
      }
    },
    bindComfir(val) {
        this.$confirm('是否引入并立即编辑商品?', '提示', {
          confirmButtonText: '是，引入商品立即编辑',
          cancelButtonText: '否，引入商品稍后编辑',
          type: 'warning',
        }).then(() => {
          updateE3BindStatus({ goodsId: val.goodsId }).then(res => {
            this.getList()
            this.$router.push({
              path: '/goodsMiddleStage/goodsManageEdit',
              query: { ...val }
            })
          }).catch(err => {
            console.log(err)
          })
        }).catch(() => {console.log('noe')});

      // console.log(res)
      // console.log(val)
      // try {
      //   await this.$confirm('是否引入并立即编辑商品?', '提示', {
      //     confirmButtonText: '是，引入商品立即编辑',
      //     cancelButtonText: '否，引入商品稍后编辑',
      //     type: 'warning'
      //   })
      //   console.log('66666')
      //   this._updateE3BindStatus(val, true)
      // } catch (error) {
      //   console.log('error')
      //   this.$message.success('商品已引入')
      //   this._updateE3BindStatus(val)
      // }
    },
    async _updateE3BindStatus(val, jump = false) {
      try {
        const { data } = await updateE3BindStatus({ goodsId: val.goodsId })
        this.$message.success('操作成功')
        this.getList()
        if (jump) {
          this.$router.push({
            path: '/goodsMiddleStage/goodsManageEdit',
            query: { ...val }
          })
        }
      } catch (error) {
        console.log(error)
      }
    },
    async getBackCateTree() {
      try {
        const { data } = await getCateTree()
        this.queryConfig[2].data = data.treeList
        this.generateCatTree(this.queryConfig[2].data)
      } catch (error) {
        console.log(error)
      }
    },
    // 生成类目数 删除children为空的选项
    generateCatTree(val) {
      val.forEach(it => {
        if (it.children.length > 0) {
          this.generateCatTree(it.children)
        } else {
          delete it.children
        }
      })
    },
    search() {
      this.listQuery.pageIndex = 1
      if (this.listQuery.backCatIds) {
        this.listQuery.backCatId = this.listQuery.backCatIds.slice(-1)[0]
      } else {
        this.listQuery.backCatId = ''
      }
      this.getList()
    }
  }
}
</script>

<style>
</style>
